<!--
 * @Description: axios封装方法测试
 * @Author: laoyuan
 * @Date: 2023-06-09 16:52:53
-->
<template>
  <h1 class="title">axios请求接口测试</h1>

  <div class="test-btn"><el-button type="primary" @click="test1">请求接口测试GET</el-button></div>
  <div class="test-btn"><el-button type="primary" @click="test2">请求接口测试POST</el-button></div>

  <!-- 上传图片方法测试 -->
  <div class="upload-box">
    <input
      type="file"
      @change="uploadFile"
      accept="image/png,image/jpeg,image/gif, image/jpg"
      multiple
    />
  </div>
  <!-- 下载图片测试 -->
  <a class="test-down" href="http://localhost:3000/file/download?fileName=test">下载图片</a>
</template>
<script setup lang="ts">
  import { getUserInfo, userLogin } from '@/services/api/user';
  import { uploadImage } from '@/services/api/files';

  // 获取用户信息
  async function test1() {
    let { data } = await getUserInfo();
    if (data) {
      // 如果有数据的时候处理逻辑
    }
  }

  // 用户登录
  async function test2() {
    let { data } = await userLogin({ mobile: 131, code: 556600 });
    if (data) {
      // 如果有数据的时候处理逻辑
    }
  }

  // 上传图片
  async function uploadFile(e: any) {
    const file = e.target.files;
    const params = {
      files: file,
    };
    const formData = new FormData();
    for (const item of params.files) {
      formData.append('files', item);
    }
    const { data } = await uploadImage(formData);
    if (data) {
      // 上传成功后处理逻辑
      e.target.value = '';
    }
  }
</script>
<style lang="scss" scoped>
  $title-border: 2px solid #ddd;
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin-top: 20px;
    font-size: 18px;
    border-top: $title-border;
    border-bottom: $title-border;
  }
  .test-btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .upload-box {
    margin-top: 20px;
    text-align: center;
  }
  .test-down {
    display: block;
    width: 120px;
    height: 30px;
    margin: 20px auto;
    font-size: 16px;
    text-align: center;
  }
</style>
